<template>
	<view class="center">
		<view class="left">
			<swiper style="width: 100%;height: 100%;" circular indicator-dots :autoplay="true" :interval="3000"
				:duration="1000">
				<swiper-item>
					<image src="../../../../static/banner/4.png" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../../../static/banner/1.png" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../../../static/banner/2.png" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../../../static/banner/3.png" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../../../static/banner/5.png" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="right">
			<view class="item" @click="itemClick('0')">
				<image class="img" src="../../static/base-question/collect.png"></image>
				<view class="text">我的收藏</view>
			</view>
			<view class="item" @click="itemClick('1')">
				<image class="img" src="../../static/base-question/mistakes.png"></image>
				<view class="text">错题本</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const itemClick = (flag) => {
		uni.navigateTo({
			url: `/pages/collect-or-wrong/collect-or-wrong?flag=${flag}`
		})
	}
</script>

<style lang="scss">
	.center {
		margin: 30rpx 0;
		display: flex;

		.left {
			width: 530rpx;
			height: 360rpx;
			background-color: #f8faff;
			border-radius: 20rpx;
		}

		.right {
			border-radius: 20rpx;
			background-color: #f8faff;
			flex: 1;
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			box-shadow: -4rpx 4rpx 10rpx rgba(136, 136, 136, 0.5);

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.img {
					width: 70rpx;
					height: 70rpx;
				}

				.text {
					font-size: 24rpx;
					margin-top: 10rpx;
					color: $text-color;
				}
			}
		}
	}
</style>